---
title: gatsby-theme-ui-blog
---

<strong>

`gatsby-theme-ui-blog` package was deprecated after Theme UI v0.3.1.

</strong>

---

# gatsby-theme-ui-blog

Minimal Gatsby MDX blog theme built with Theme UI. Use this as a starting point
for building custom blog themes with Theme UI.

```sh
npm i gatsby-theme-ui-blog
```

```js
// gatsby-config.js
module.exports = {
  plugins: ['gatsby-theme-ui-blog'],
}
```

## Shadowing

Shadow the following components to customize styles and page layout:

| Component                            | Description                                                 | Props                                       |
| ------------------------------------ | ----------------------------------------------------------- | ------------------------------------------- | -------------------- |
| `src/gatsby-theme-ui-blog/posts.js`  | Index page for all blog posts                               | `{ posts }`                                 |
| `src/gatsby-theme-ui-blog/post.js`   | Full blog post article page                                 | `{ title, date, children, keywords, tags }` |
| `src/gatsby-theme-ui-blog/layout.js` | Wrapping layout component for the Post and Posts components |                                             | all page-level props |

## Theming

Use `gatsby-plugin-theme-ui` to override or customize the theme.

```sh
npm i gatsby-plugin-theme-ui
```

```js
// gatsby-config.js
module.exports = {
  plugins: ['gatsby-theme-ui-blog', 'gatsby-plugin-theme-ui'],
}
```

```js
// shadow src/gatsby-plugin-theme-ui/index.js
import base from 'gatsby-theme-ui-blog/src/gatsby-plugin-theme-ui'

const theme = {
  ...base,
  colors: {
    text: 'white',
    background: 'black',
    primary: 'cyan',
    secondary: 'magenta',
  },
}

export default theme
```

## Options

This theme is based off of [gatsby-theme-blog-core][] and uses all the same
options.

| Key           | Default value    | Description                                                                                               |
| ------------- | ---------------- | --------------------------------------------------------------------------------------------------------- |
| `basePath`    | `/`              | Root url for all blog posts                                                                               |
| `contentPath` | `content/posts`  | Location of blog posts                                                                                    |
| `assetPath`   | `content/assets` | Location of assets                                                                                        |
| `mdx`         | `true`           | Configure `gatsby-plugin-mdx` (if your website already is using the plugin pass `false` to turn this off) |

[gatsby-theme-blog-core]: https://www.npmjs.com/package/gatsby-theme-blog-core
